<template>
  <div>
    <div id="bar2" style="height:300px; width:100%"></div>
  </div>
  
</template>

<script>
import { request} from "../network"
export default {
  mounted() {
    this.victimirank()
    
  },
  methods: {
    victimirank() {
      request({
        url: "/apt/attackcountryrank",
      }).then((res) => {
        this.bar2 = this.$echarts.init(document.getElementById("bar2"));
        var victimcountryname = [];
        var victimcountryvalue = [];

        for (let item of res.data.data.slice(0, 10)) {
          victimcountryname.push(item.country);
          victimcountryvalue.push(item.value);
        }

        var option3 = {
          title: {
            text: "受害国家/地区排行",
            textStyle: {
              color: "#7AFEC6",
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },

          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
          },
          yAxis: {
            type: "category",
            data: victimcountryname,
            axisLabel: {
              color: "#FFFFFF	", 
            },
          },
          series: [
            {
              name: "能力",
              type: "bar",
              data: victimcountryvalue,
              itemStyle: {
                // color: "#ff7575	",
                barBorderRadius: [0, 5, 5, 0],
              },
            },
          ],
        };
        this.bar2.setOption(option3);
      });
    },
    
  },

}
</script>

<style>

</style>